<template>
  <div>
    <button @click="del">清空？</button>
    <div id="timelineEcharts" style="height: 240px"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
    data () {
        return {
            newD: []
        }
    },
    props: {
        timelineData: Array
    },
    methods: {
        initEcharts (data) {
            let e = echarts.init(document.getElementById('timelineEcharts'))
            let o = {
                grid: {
                    height: 100
                },
                dataZoom: [{
                    id: 'dataZoomX',
                    type: 'slider',
                    xAxisIndex: [0],
                    filterMode: 'filter',
                    bottom: -1
                }],
                xAxis: {
                    type: 'time',
                    splitLine: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    show: false,
                    axisPointer: {
                        show: false
                    }
                },
                series: [{
                    data: data,
                    type: 'scatter',
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            formatter: function (param) {
                                return param.data[2]
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = [
                                    '#C1232B', '#B5C334', '#c39f0b', '#E87C25', '#27727B',
                                    '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                    '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                                ]
                                return colorList[params.dataIndex]
                            }
                        }
                    },
                    symbolSize: 12
                }],
                tooltip: {
                    trigger: 'item',
                    axisPointer: {
                        show: true,
                        snap: true,
                        lineStyle: {
                            type: 'dashed',
                            width: 1
                        }
                    },
                    formatter: function (params) {
                        return params.data[2] + '  (' + params.data[0] + ')'
                    }
                }
            }
            e.hideLoading()
            e.setOption(o)
        },
        del () {
            this.new = [
                {
                    name: '杰森斯坦森',
                    children: [
                        {
                            name: 'analytics'
                        }
                    ]
                }
            ]
            this.initEcharts(this.new)
        }
    }
}
</script>
<style scoped>
</style>
